<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css" crossorigin="anonymous">
    <link rel="stylesheet" href="../ajax/libs/bootstrap-fileinput/fileinput.css" crossorigin="anonymous">
    <link rel="stylesheet" href="../sks/bootstrap-image-show/bootstrap-image-show.css" crossorigin="anonymous">
    <link rel="stylesheet" href="../sks/bootstrap-image-show-modal/bootstrap-image-show-modal.css" crossorigin="anonymous">


    <script src="../js/jquery.js" ></script>
    <script src="../bootstrap-3.3.7/js/bootstrap.js" crossorigin="anonymous"></script>
    <script src="../ajax/libs/bootstrap-fileinput/fileinput.js" type="text/javascript"></script>
    <script src="../sks/bootstrap-image-show/bootstrap-image-show.js" crossorigin="anonymous"></script>
    <script src="../sks/bootstrap-image-show-modal/bootstrap-image-show-modal.js" crossorigin="anonymous"></script>
    <style>
        .test-img {
            width: 160px;
            height: 160px;
            margin-right: 10px;
        }
    </style>
</head>
<body class="white-bg">
<!--    <div class="wrapper wrapper-content animated fadeInRight ibox-content">-->
<div class="wrapper wrapper-content fadeInRight">

    <div class="form-horizontal m" >
<!--        之前笔记本不显示-->
        <img class='image-show-img-addimg' />
        <img class='test-img' src="https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/a7e28d654fab48a79dfdcddbdac6c356.png"/>
        <img class='test-img' src="https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/0296b6f3a6e240fbb186edbf4c99b434.png"/>
        <img class='test-img' src="https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/9c2f9487daa044269715f97eb304122c.png"/>
        <img class='test-img' src="https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/d9c56d79482b43b490fea7e4d248392b.jpg"/>
        <h4 class="form-header h4">imageshow</h4>
        <div class="row">
            <div class="col-sm-12 " id="imageshow">
            </div>
        </div>
        <h4 class="form-header h4">imageshow2</h4>
        <div class="row">
            <div class="col-sm-12 " id="imageshow2">
            </div>
        </div>
        <div class="row">
            <button id="btn-destroy-testfileinput" class="btn btn-primary" data-loading-text="Loading..."
                    type="button"> 销毁testfileinput
            </button>
            <button id="btn-destroy-imageshow2" class="btn btn-primary" data-loading-text="Loading..."
                    type="button"> 销毁imageshow2
            </button>
        </div>
        <h4 class="form-header h4">testfileinput</h4>
        <div class="row">
            <input id="testfileinput" type="file" multiple>

        </div>

<!--        <div id="kvFileinputModal" class="file-zoom-dialog modal fade" tabindex="-1" aria-labelledby="kvFileinputModalLabel" style="display: none;">
<div class="modal-dialog modal-lg" role="document">-->
<!--            <div class="modal-content">-->
<!--                <div class="modal-header">-->
<!--                    <h5 class="modal-title">详细预览</h5>-->
<!--                    <span class="kv-zoom-title" title="nature-3.jpg  (617.93 KB)">nature-3.jpg  <samp>(617.93 KB)</samp></span>-->
<!--                    <div class="kv-zoom-actions"><button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-toggleheader" title="缩放" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-resize-vertical"></i></button><button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-fullscreen" title="全屏" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-fullscreen"></i></button><button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-borderless" title="无边界模式" data-toggle="button" aria-pressed="false" autocomplete="off"><i class="glyphicon glyphicon-resize-full"></i></button><button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-close" title="关闭当前预览" data-dismiss="modal" aria-hidden="true"><i class="glyphicon glyphicon-remove"></i></button></div>-->
<!--                </div>-->
<!--                <div class="modal-body">-->
<!--                    <div class="floating-buttons"></div>-->
<!--                    <div class="kv-zoom-body file-zoom-content krajee-default">-->
<!--                        <img src="https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/37a5dd22c3e34169ad661e23af3653ae.png" class="file-preview-image kv-preview-data file-zoom-detail" title="nature-3.jpg" alt="nature-3.jpg" style="width: auto; height: auto; max-width: 100%; max-height: 100%;">-->
<!--                    </div>-->
<!--                    <button type="button" class="btn btn-navigate btn-prev" title="预览上一个文件"><i class="glyphicon glyphicon-triangle-left"></i></button> <button type="button" class="btn btn-navigate btn-next" title="预览下一个文件" disabled="disabled"><i class="glyphicon glyphicon-triangle-right"></i></button>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

<!--        <div class="file-zoom-dialog modal fade" id="bootstrapImageShowModal" tabindex="-1"aria-labelledby="myLargeModalLabel"  aria-hidden="true">-->
<!--            <div class="modal-dialog modal-lg" role="dialog" >-->
<!--                <div class="modal-content">-->
<!--                    <div class="modal-header">-->
<!--                        <h5 class="modal-title">详细预览</h5>-->
<!--                        <span class="kv-zoom-title" title="{docmentName}">{docmentName}<samp>{docmentSize}</samp></span>-->
<!--                        <div class="kv-zoom-actions">-->
<!--                            <button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-toggleheader" title="缩放" data-toggle="button" aria-pressed="false" autocomplete="off">-->
<!--                                <i class="glyphicon glyphicon-resize-vertical"></i>-->
<!--                            </button>-->
<!--                            <button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-fullscreen" title="全屏" data-toggle="button" aria-pressed="false" autocomplete="off">-->
<!--                                <i class="glyphicon glyphicon-fullscreen"> </i>-->
<!--                            </button>-->
<!--                            <button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-borderless" title="无边界模式" data-toggle="button" aria-pressed="false" autocomplete="off">-->
<!--                                <i class="glyphicon glyphicon-resize-full"> </i>-->
<!--                            </button>-->
<!--                            <button type="button" class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-close" title="关闭当前预览" data-dismiss="modal" aria-hidden="true">-->
<!--                                <i class="glyphicon glyphicon-remove"></i>-->
<!--                            </button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="modal-body">-->
<!--                        <img class="carousel-inner img-responsive img-rounded img-viewer" onclick="" onmouseover="this.style.cursor='zoom-out';" onmouseout="this.style.cursor='default'" src="https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/9c2f9487daa044269715f97eb304122c.png" style="cursor: default;">-->
<!--                    </div>-->

<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
    </div>

</div>


<script th:inline="javascript">
    var imageUrls=[
        {
            wbDocmentId:1	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/a7e28d654fab48a79dfdcddbdac6c356.png",
        },
        {
            wbDocmentId:2	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/0296b6f3a6e240fbb186edbf4c99b434.png",
        },
        {
            wbDocmentId:3	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/9c2f9487daa044269715f97eb304122c.png",
        },
        {
            wbDocmentId:4	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/78bb5b31dcb247cea922d1b528f8fbaa.png",
        },
        {
            wbDocmentId:5	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/31e58257ffdf471fab07b1cc0ec74509.png",
        },
        {
            wbDocmentId:6	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/fc6cb60732e54cfbb297c9e3b296ce60.png",
        },
        {
            wbDocmentId:7	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/37a5dd22c3e34169ad661e23af3653ae.png",
        },
        {
            wbDocmentId:8	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/dad3bc8a871a40868cb727f7600657a0.png",
        },
        {
            wbDocmentId:9	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/3c7ffee3787e42efa142e1f4c91a0337.png",
        },
        {
            wbDocmentId:10	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/6239474d15c04e1c92080ceb8d497e34.png",
        },
        {
            wbDocmentId:11	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/313272d1becf4254823b57074909c622.png",
        },
        {
            wbDocmentId:12	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/becf9640a4994c6db78de66d4d8be1a4.png",
        },
        {
            wbDocmentId:13	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/8cd75044a91e4ff6a8e858dd5d94c0d3.png",
        },
        {
            wbDocmentId:14	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/9bad9b8e3d114f0fa2d92dce67299fa3.png",
        },
        {
            wbDocmentId:15	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/4f8b0d2129744724bd0f3ae8b8679cb5.png",
        },
        {
            wbDocmentId:16	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/5272a3e52c2b4454962d43e4685b3538.jpg",
        },
        {
            wbDocmentId:17	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/e891c218c4be49e4a09495b5803076a5.jpg",
        },
        {
            wbDocmentId:18	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/3e54dfaffe8a4cc2aba40db2ce967784.jpg",
        },
        {
            wbDocmentId:19	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/d9c56d79482b43b490fea7e4d248392b.jpg",
        },
        {
            wbDocmentId:20	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/b9853495f73b420f951d43c53ca47c2a.jpg",
        },
        {
            wbDocmentId:21	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/3a04c5b06c254b67b1e82feeb7c25244.jpg",
        },
        {
            wbDocmentId:22	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/56816a9992a441aaafbb116830ee1d72.jpg",
        },
        {
            wbDocmentId:23	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/8a997a9621b24d4d95a9eb42f5cd13fb.jpg",
        },
        {
            wbDocmentId:24	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/6c96dbd8622d40978775bc0dde25ab1b.jpg",
        },
        {
            wbDocmentId:25	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/38fa42da73364b41a4d01d3a332014b0.jpg",
        },
        {
            wbDocmentId:26	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/e8151ac62183444096cdb09c55b22bb6.jpg",
        },
        {
            wbDocmentId:27	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/dcd5ef7795884f8d910d6baaa609bdc8.jpg",
        },
        {
            wbDocmentId:28	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/f43fc948e3c44b7f80370a3eb7c08f12.jpg",
        },
        {
            wbDocmentId:29	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/2ee06b2bff1e4330971a1c7e36379d0f.jpg",
        },
        {
            wbDocmentId:30	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/6a3259d9ef3f4919918fa3e3a475af43.jpg",
        },
        {
            wbDocmentId:31	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/a1ce74a7a2ba4b00be4008c8111394af.jpg",
        },
        {
            wbDocmentId:32	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/118f35a531334765bd2a7b8a3c63c1c0.jpg",
        },
        {
            wbDocmentId:33	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/714d088baad34b3aa465d4a8446351c4.jpg",
        },
        {
            wbDocmentId:34	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/006ad49609764f57b6eed8b046c1af61.jpg",
        },
        {
            wbDocmentId:35	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/c5fb1ed8eea746269a0b200d3d1b6625.jpg",
        },
        {
            wbDocmentId:36	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/874ae964982c44e2910b000645920e29.jpg",
        },
        {
            wbDocmentId:37	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/bd180deba73d48a8afdd82931cf4c9c3.jpg",
        },
        {
            wbDocmentId:38	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/1b9f51c2389a4c0bb594533a564e5bc9.jpg",
        },
        {
            wbDocmentId:39	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/55188f7621cd40ab9e088c14f17cdff4.jpeg",
        },
        {
            wbDocmentId:40	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/9811d808ebe947499edaa54ef0bc9037.jpeg",
        },
        {
            wbDocmentId:41	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/4cc6374ac59e49918d5bf296d313429b.jpg",
        },
        {
            wbDocmentId:42	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/9ac4c023dd0f435699240d40cdf9c64a.zip",
        },
        {
            wbDocmentId:43	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/1f949e03e99c4759bdf847d137aa46bf.zip",
        },
        {
            wbDocmentId:44	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/5e1e6e3e5a644433a99dd01c273eba7e.zip",
        },
        {
            wbDocmentId:45	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/4a0615a937444e59b3eb693aa5d9759b.jpg",
        },
        {
            wbDocmentId:46	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/5ffeb4b0fdca40e6bf56c40da6aec625.jpg",
        },
        {
            wbDocmentId:47	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/c0b99869bb7d47d4b034ffef96507c8a.jpg",
        },
        {
            wbDocmentId:48	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/5004039c266947a9b582ac2af2b4fdf9.jpg",
        },

    ]

    $("#imageshow").imageshow({
        data:imageUrls,
    })


    var imageUrls2=[
        {
            wbDocmentId:1	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/a7e28d654fab48a79dfdcddbdac6c356.png",
        },
        {
            wbDocmentId:2	 ,
            url:"https://test-001a.oss-cn-hangzhou.aliyuncs.com/test/0296b6f3a6e240fbb186edbf4c99b434.png",
        },
    ]


    $("#imageshow2").imageshow({
        data:imageUrls2,
    })


    $("#testfileinput").fileinput({
        'theme': 'explorer-fas',
        'uploadUrl': '#',
        overwriteInitial: false,
        initialPreviewAsData: true,
        initialPreview: [
            "https://dpic.tiankong.com/mz/f1/QJ6415651243.jpg",
            "https://dpic.tiankong.com/kp/b7/QJ6431332977.jpg",
            "https://dpic.tiankong.com/6u/d5/QJ6507206819.jpg",
        ],
        initialPreviewConfig: [
            {caption: "nature-1.jpg", size: 329892, width: "120px", url: "{$url}", key: 1},
            {caption: "nature-2.jpg", size: 872378, width: "120px", url: "{$url}", key: 2},
            {caption: "nature-3.jpg", size: 632762, width: "120px", url: "{$url}", key: 3}
        ]
    });

    $('.test-img').bootstrapImageShowModal();
    // $('.test-img').bootstrapImageShowModal();


    $(function (){
        $("#btn-destroy-testfileinput").click(function(){
            $("#testfileinput").fileinput("destroy");
        });
    });

    $(function (){
        $("#btn-destroy-imageshow2").click(function(){
            $("#imageshow2").imageshow("destroy")
        });
    });

</script>

</body>
</html>